<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript">
	function chattingGo(chat) {
		alert(chat);
	}
	//그룹에 가입하거나 가입신청하지 않은 멤버가 그룹가입 신청함
	
</script>
<style type="text/css">
#groupList-table {
	font-family: gulim, Arial, fantasy;
	font-size: 12px;
}

#groupList-table td {
	text-align: center;
	color: #678197;
}

#groudListCaption>span {
	margin: 0 100px;
	display: inline-block;
	font: bold 1.2em/2em "Century Gothic", "Trebuchet";
	color: #003366;
}

#groudListCaption>th {
	background: #f4f9fe;
}

#table-caption {
	color: #66a3d3;
	font: bold 1.2em/2em "Century Gothic", "Trebuchet";
	color: #66a3d3;
}
</style>
<body>
	<div style="width: 490px; height: 460px;">
		<div id="groudListCaption" style="width: 100%; height: 9%;">
			<span>희선운동</span>
		</div>
		<div id="groupListContent" style="width: 100%; height: 66%;">
			<div style="width: 54%; float: left; height: 100%; overflow: hidden;">
				<table id="groupList-table" width="100%;" border="2" cellspacing="0"
					cellpadding="3" bordercolor="#e5eff8"
					style="border-collapse: collapse;" rules="rows" frame="hsides">
					<tr id="table-caption" style="height: 9px;">
						<th scope="col" style="width: 30%; height: 9px;">회원</th>
						<th style="width: 50%; height: 9px;">건강치</th>
						<th style="width: 30%; height: 9px;"></th>
					</tr>

					<c:forEach var="groupMember" items="${groupMemberList }">
						<tr style="height: 9px;">
							<td style="width: 30%; height: 9px;">${groupMember.memberNickname }</td>
							<td style="width: 50%; height: 9px;">${groupMember.healthpointTotal }</td>
							<td style="width: 30%; height: 9px;"></td>
						</tr>
					</c:forEach>

				</table>
			</div>
			<div id="chatHidden"
				style="width: 46%; float: left; height: 100%; overflow: hidden;">
				<div style="width: 90%; height: 50%; margin: 0 auto;">
					<div>
						<span>그룹원 초대</span>
					</div>
					<div>
						<form name="">
							<input type="text" size="8" /> <input type="submit" name=""
								value="찾기" />
						</form>
					</div>
					<div style="width: 100%; height: 70%;">
					<div align="center" style="float: left; width: 60%; height: 50px;">신청자이름</div>
					<div align="center" style="float: left; width: 40%; height: 50px;"><input type="button" value="초대" onclick=""> </div>
					</div>
				</div>
				<div style="width: 90%; height: 50%; margin: 0 auto;">
					<div style="width: 100%; height: 30px;">
						<span>그룹 가입 신청자</span>
					</div>
					<div style="width: 100%; height: 100%;">
					<div style="float: left; width: 60%">신청자이름</div>
					<div style="float: left; width: 40%">버튼위치</div>
					</div>
				</div>
			</div>
		</div>
		<div id="groupListBottom"
			style="float: left; width: 100%; height: 10%;">
			<div>
				<span style="margin: -40px 90px;"> <input
					type="button" value="가입요청" onclick="javascript:groupRequest(${groupNo});">
					<input type="reset" value="취 소">
				</span>
			</div>
		</div>
	</div>
</body>
</html>